<template>
    <div id="SideNav">
        <div class="icon" id="notice" v-if="isLogin"
             :class="{'active':tab==status.notice}"
             @click="tabClick(status.notice)"></div>
        <div class="icon" id="course" v-if="isLogin"
             :class="{'active':tab==status.course}"
             @click="tabClick(status.course)"></div>
        <div class="icon" id="homework" v-if="isLogin"
             :class="{'active':tab==status.homework}"
             @click="tabClick(status.homework)"></div>

        <div class="placeholder"></div>

        <div class="log-out" v-if="isLogin"
             @click="logout()"></div>
    </div>
</template>

<script type="text/babel">
    //    var Vue = require('../../lib/vue.common.min.js');
    var Status_tab = require('./tabStatus');

    module.exports = {
        props: ['isLogin', 'tab'],
        data: ()=>({
            status: Status_tab
        }),
        methods: {
            tabClick: function (tab) {
//                this.tab = tab;
                switch (tab) {
                    case Status_tab.course:
                    {
                        return router.go({name: 'courseList'});
                    }
                    case Status_tab.discussion:
                    {
                        return router.go('/discussion');
                    }
                    case Status_tab.notice:
                    {
                        return router.go('/notice');
                    }
                    case Status_tab.homework:
                    {
                        return router.go({name: 'homeworkList'});
                    }
                }
            },
            logout: function () {
                this.$http({
                            url: '/api/user/login/',
                            method: 'DELETE'
                        })
                        .then((res)=> {
                            let data = res.data;
                            if (data.code == 0) {
                                this.isLogin = false;
                                Login.isLogin = false;
                                router.replace('/login');
                            }

                        }, function (response) {
                            // error callback
                        });
            }
        }
    }
</script>